<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_con">
				<view class="h_tit">{{$t('chase.every_day_has')}}({{$t('chase.total')}})</view>
				<view class="h_num">{{can_score||'0.00'}}</view>
				<image class="h_img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
			</view>			
		</view>
		
		<view class="card">
			<view class="tab_item">
				<view class="tab" :class="tab_type == 'dataPack'?'tab_s':''" @click="typeChange('dataPack')">{{$t('use.data_package')}}</view>
				<view class="tab" :class="tab_type == 'server'?'tab_s':''" @click="typeChange('server')">{{$t('use.service_provider')}}</view>
			</view>
			<view class="row_item">	
				<view class="row_auto">	
				<block v-if="tab_type == 'dataPack'">
					<view class="row" v-for="(item,index) in bag_list" :key="'d_'+index">
						<view class="r_con">
							<image class="r_c_img" src="/static/img/data_pack.png" mode="widthFix"></image>
							<view class="r_c_msg">
								<view class="t1">{{$t('bean.data_package_txt')}} lv{{item.vip_level}}</view>
								<view class="t2">
									<!-- <image class="img" src="/static/other/bean.png" mode="widthFix"></image> -->
									<view class="num">{{item.day_score}}</view>
									{{$t('use.diamond')}}
								</view>
							</view>
							<!-- <view class="r_c_btn" @click="buy_bag(item.id)">{{$t('use.buy')}}</view> -->
						</view>
						<view class="c_tip">{{item.add_time|formatDate}}</view>
					</view>
					<block v-if="empty_show">
						<view style="width:100%;margin-top: 20vw;" v-if="bag_list.length==0">
							<u-empty mode="data" iconSize="120" :text="$t('nodata')" ></u-empty>
						</view>
					</block>
					
					
				</block>
				<block v-if="tab_type == 'server'">
					<view class="row" v-for="(item,index) in stat_list" :key="'s_'+index">
						<view class="r_con">
							<block v-if="index < 3">
								<image class="r_c_img" :src="'/static/img/star_'+(index+1)+'.png'" mode="widthFix"></image>
							</block>
							<block v-else>
								<image class="r_c_img" src="/static/img/star_more.png" mode="widthFix"></image>
							</block>
							<view class="r_c_msg">
								<view class="t1">{{$t('bean.service_provider_txt')}} lv{{item.vip_level}}</view>
								<view class="t2">
									<!-- <image class="img" src="/static/other/bean.png" mode="widthFix"></image> -->
									<view class="num">{{item.day_score}}</view>
									{{$t('use.diamond')}}
								</view>
							</view>
							<!-- <view class="r_c_btn" @click="buy_stat(item.id)" >{{$t('use.buy')}}</view> -->
						</view>
						<view class="c_tip">{{item.add_time|formatDate}}</view>
					</view>
					<block v-if="empty_show">
						<view style="width:100%;margin-top: 20vw;" v-if="stat_list.length==0">
							<u-empty mode="data" iconSize="120" :text="$t('nodata')" ></u-empty>
						</view>
					</block>
					
					
				</block>
				</view>	
			</view>
		</view>
		<!-- <view class="bg_item"></view> -->
		
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				can_score : '0.00',
				tab_type: 'dataPack',
				empty_show : 0,
				bag_list : [],
				stat_list : [],
				dataPackArr:[
					{tier:1,bean:'399'},{tier:2,bean:'399'},{tier:3,bean:'399'}
				],
				serverArr:[
					{tier:1,bean:'399'},{tier:2,bean:'399'},{tier:3,bean:'399'}
				]
			};
		},
		onLoad() {
			this.initData();
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods:{
			show_name(item){
				let lang = this.$i18n.locale;
				 let tit = item.name;
				if(lang == 'en'){
					tit = item.name_en || tit;
				}else if(lang == 'jp'){
					tit = item.name_jp || tit;
				}
				return tit;
			},
			show_remark(item){
				let lang = this.$i18n.locale;
				 let tit = item.remark;
				if(lang == 'en'){
					tit = item.remark_en || tit;
				}else if(lang == 'jp'){
					tit = item.remark_jp || tit;
				}
				return tit;
			},
			initData(){
				let url = this.site_url + 'api/auth/member/clac_day_score';
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.can_score = res.data;
					}	
				})
			},
			loadData(){
				let url = this.site_url + 'api/auth/member/my_vip_order';
				this.areq(url).then(res=>{
					this.empty_show = 1;
					if(res.code == 1){
						this.bag_list = res.data.bag_list;
						this.stat_list = res.data.stat_list;
					}	
				})
			},
			typeChange(_type){
				this.tab_type = _type;
			}
		}
	}
</script>

<style lang="scss">
.head{
	width: 100%;
	padding: 4vw 4%;
	.h_con{
		@include card_style();
		display: flex;
		align-items: center;
		.h_tit{
			font-size: 4vw;
			color: $main_color5;
		}
		.h_num{
			padding: 3vw;
			font-size: 5vw;
			font-weight: bold;
			color: $main_color_s2;
		}
		.h_img{
			width: 5vw;
		}
	}
	
}

.bg_item {
	@include bg_item(90vw);
}
.card{
	display: inline-block;
	margin-top: 6vw;
	padding: 11vw 4vw 4vw;
	background: #fff;
	position: relative;
	z-index: 2;
	width: 92%;
	margin-left: 4%;
	border-radius: 3vw;
	.tab_item{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		font-size: 4vw;
		color: #fff;
		display: flex;
		align-items: center;
		height: 11vw;
		border-radius: 2vw 2vw 0 0;
		.tab{
			flex: 1;
			height: 11vw;
			line-height: 11vw;
			text-align: center;
			background: $main_color;
			position: relative;
		}
		.tab:nth-child(1){
			border-radius: 3vw 0 3vw 0;
		}
		.tab:nth-child(2){
			border-radius: 0 3vw 0 3vw;
		}
		.tab_s{
			background: #fff;
			height: 14vw;
			margin-top: -3vw;
			padding-top: 1.5vw;
			border-radius: 2vw 2vw 0 0 !important;
			color: #222;
			font-weight: bold;
			position: relative;
			&::after{
				content: '';
				position: absolute;
				width: 6vw;
				height: 1vw;
				background: $main_color;
				border-radius: 0.3vw;
				bottom: 1vw;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.row_item{
		width: 100%;
		height: 70vh;
		.row_auto{
			width: 100%;
			height: 100%;
			overflow: hidden;
			overflow-y: auto;
		}
		.row{
			width: 100%;
			padding: 3vw;
			border-radius: 2vw;
			background: #FEF8F2;
			margin-top: 4vw;
			border: 1rpx solid #F4E1D6;
			.r_con{
				width: 100%;
				display: flex;
				align-items: center;
				.r_c_img{
					width: 10vw;
				}
				.r_c_msg{
					flex: 1;
					margin: 0 3vw;
					.t1{
						font-size: 3.8vw;
						font-weight: bold;
					}
					.t2{
						width: 100%;
						display: flex;
						align-items: center;
						font-size: 3vw;
						padding-top: 1vw;
						.img{
							width: 3vw;
						}
						.num{
							padding: 0 1vw;
						}
					}
				}
				.r_c_btn{
					font-size: 3.5vw;
					color: #fff;
					padding: 1.5vw 4vw;
					border-radius: 4vw;
					background: linear-gradient(90deg, #FC5E3A 0%, #FD3348 100%);
				}
			}
			.c_tip{
				width: 100%;
				padding-top: 2vw;
				margin-top: 2vw;
				border-top: 1rpx solid #F4E1D6;
				font-size: 2.8vw;
				color: #333;
			}
		}
	}
}
</style>
